<template>
  <view class="agentform">
    <view class="top">
      <uv-tabs
        :list="list"
        @click="click"
        lineWidth="30"
        lineColor="#FC4424"
        :activeStyle="{
          color: '#FC5D42',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;width:40%;"
      ></uv-tabs>
    </view>
    <view class="content">
      <view class="content-boss">
        <view class="content-box" v-for="(item, index) in goods" :key="index">
          <view class="content1">
            <view>{{ item.g1 }}</view>
            <view>{{ item.g2 }}</view>
          </view>
          <view class="content2">
            <view class="content2-left">
              <image :src="item.g3" ></image>
            </view>
            <view class="content2-right">
              <view>{{ item.g4 }}</view>
              <view>{{ item.g5 }}</view>
              <view class="much">
                <view>{{ item.g6 }}</view>
                <view>{{ item.g7 }}</view>
                <view>{{ item.g8 }}</view>
              </view>
            </view>
          </view>
          <view class="content3">
            <view>{{ item.g9 }}</view>
            <view>{{ item.g10 }}</view>
            <view>{{ item.g11 }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="hexiao">
        <view class="hexiao-content">
          <view class="he1"><image src="../../static/vip1-5.png"></image></view>
          <view class="he2">核销</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "待核销",
        },
        {
          name: "已核销",
        },
      ],
      goods: [
        {
          g1: "订单编号:983719387471",
          g2: "待核销",
          g3: "../../static/agentform.jpg",
          g4: "男运动鞋秋季男鞋青少年正品透...",
          g5: "标准白、42",
          g6: "￥",
          g7: "890.00",
          g8: "×1",
          g9: "共1件商品",
          g10: "合计",
          g11: "￥890.00",
        },
        {
          g1: "订单编号:983719387471",
          g2: "待核销",
          g3: "../../static/agentform.jpg",
          g4: "男运动鞋秋季男鞋青少年正品透...",
          g5: "标准白、42",
          g6: "￥",
          g7: "890.00",
          g8: "×1",
          g9: "共1件商品",
          g10: "合计",
          g11: "￥890.00",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss">
.agentform {
  background-color: #f5f5f5;
  height: 93vh;
  .top {
    background-color: #fff;
    border-top: 2px solid #fbfbfb;
    margin-bottom: 15px;
  }
  .content {
    margin-bottom: 60px;
    .content-boss {
      width: 90%;
      margin: auto;
      .content-box {
        border-radius: 10px;
        background-color: #fff;
        margin-bottom: 10px;
        .content1 {
          display: flex;
          justify-content: space-between;
          border-bottom: 2px solid #fbfbfb;
          font-size: 14px;
          padding: 10px;
          view:nth-child(1) {
            color: #b5b5b5;
          }
          view:nth-child(2) {
            color: #fc6146;
          }
        }
        .content2 {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          .content2-left {
            width: 30%;
            image {
              width: 100%;
              height: 80px;
              border-radius: 10px;
            }
          }
          .content2-right {
            width: 66%;
            view:nth-child(1) {
              font-size: 14px;
            }
            view:nth-child(2) {
              font-size: 13px;
              color: #acacac;
              margin-top: 10px;
            }
            .much {
              display: flex;
              margin-top: 10px;
              view:nth-child(1) {
                font-size: 10px;
                margin-top: 5px;
              }
              view:nth-child(2) {
                margin-top: 0px;
                font-size: 16px;
                color: #000;
                font-weight: bold;
              }
              view:nth-child(3) {
                color: #acacac;
                font-size: 13px;
                margin-top: 4px;
              }
            }
          }
        }
        .content3 {
          line-height: 20px;
          display: flex;
          justify-content: right;
          border-top: 2px solid #fbfbfb;
          padding: 10px;
          view:nth-child(1) {
            color: #b5b5b5;
            font-size: 13px;
          }
          view:nth-child(2) {
            margin-left: 10px;
            font-size: 14px;
          }
          view:nth-child(3) {
            margin-left: 5px;
            color: #fc5639;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .bottom {
    position: fixed;
    .hexiao {
      margin-left: 300px;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      text-align: center;
      background-color: #fff;
      .hexiao-content{
        padding-top:6px;
        .he1{
        width: 25px;
        margin:auto;
        image {
          width: 100%;
        }
      }
      .he2{
        margin-top:-5px;
        font-size: 12.5px;
      }
      }
    }
  }
}
</style>
